<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待公告" name="first">
        <!-- 表单 -->
        <form-data />
        <el-row style="margin: 10px">
          <el-col :span="2" push="22" class="hidden-sm-and-down">
            <el-button type="primary" @click="dialogTableVisible = true"
              >批量公告</el-button
            >
          </el-col>
        </el-row>
        <!-- 对话框 -->
        <el-dialog
          title="批量公告"
          :visible.sync="dialogTableVisible"
          width="30%"
        >
          <el-form :model="form" label-position="right" label-width="150px">
            <el-form-item label="公告时间:">
              <el-input
                v-model="form.announcementTime"
                autocomplete="off"
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="到期时间:">
              <el-input
                v-model="form.expirationTime"
                autocomplete="off"
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="到期提醒联系人:">
              <el-input
                v-model="form.linkman"
                autocomplete="off"
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="到期提醒联系方式:">
              <el-input
                v-model="form.information"
                autocomplete="off"
                style="width: 80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="公告图片">
              <el-image
                style="width: 150px; height: 90px"
                :src="url"
                :preview-src-list="srcList"
              />
            </el-form-item>
            <el-form-item label="是否领取">
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-row type="flex" justify="center">
              <el-col :span="9">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogTableVisible = false">
                  确 定
                </el-button>
              </el-col>
            </el-row>
          </span>
        </el-dialog>
        <!-- 表格 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          :row-class-name="tableRowClassName"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#eff1f7' }"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" width="55">
          </el-table-column>

          <el-table-column label="当事人" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="手机号码" width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="办案单位"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="name" label="文书编号" width="120">
          </el-table-column>
          <el-table-column prop="name" label="无主物" width="120">
            <template>
              <el-image
                style="width: 100px; height: 50px"
                :src="url"
                :fit="fit"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="物品名称" width="120">
          </el-table-column>
          <el-table-column prop="name" label="领取人" width="120">
          </el-table-column>

          <el-table-column prop="name" label="公告时间" width="120">
          </el-table-column>
          <el-table-column prop="name" label="操作" width="120">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
          type="flex"
          justify="end"
          style="background: #eef2f5; padding: 5px 20px; margin-top: 25px"
        >
          <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, prev, pager, next,sizes,jumper"
            :total="400"
          >
          </el-pagination>
        </el-row>
      </el-tab-pane>

      <!-- 已公告 -->
      <el-tab-pane label="已公告" name="second">已公告</el-tab-pane>

      <!-- 批量公告 -->
      <bath-anoun v-show="flag" />
    </el-tabs>
  </div>
</template>

<script>
import BathAnoun from "./components/bath-anoun.vue";
import FormData from "./components/form-data.vue";
export default {
  components: {
    FormData,
    BathAnoun,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
      formInline: {
        user: "",
        phone: "",
        units: "",
        number: "",
        name: "",
        date: "",
        receiver: "",
      },
      form: {
        announcementTime: "",
        expirationTime: "",
        linkman: "",
        information: "",
        picture: "",
      },
      dialogTableVisible: false,
      activeName: "first",
      formLabelWidth: "130px",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      radio: "1",
      currentPage1: 5,
      flag: false,
    };
  },
  methods: {
    handleClick() {},
    submitForm(activeName) {},
    resetForm(activeName) {
      this.$refs[activeName].resetFields();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "gray-row";
      }
      return "";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  ::v-deep .btn-prev {
    background: none;
  }
  ::v-deep .btn-next {
    background: none;
  }
  ::v-deep .el-pager li {
    background: none;
  }
}
::v-deep .el-table .gray-row {
  background: #eef1f7;
}
</style>
